<template>
  <div class="main">
    <div ref="barChart" class="barChart"></div>
  </div>
</template>

<script>
    import * as echarts from "echarts";
export default {
  name: "pictorialBar",
    mounted() {
      this.drawBar();
    },
    methods: {
    drawBar() {
      let xData = ["正常设备", "报警设备", "离线设备", "故障设备"];
      let yData = [10, 20, 30, 40];
      let myChart = this.$echarts.init(this.$refs.barChart);
      let option = {
        grid: {
          top: "25%",
          left: "-5%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        animation: false,
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#82b0ec",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#82b0ec",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              margin: 30,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0c2c5a",
              },
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 15,
                fontWeight: "bold",
                color: '#34DCFF',
              },
            },
            color: "#5bfcf4",
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            color: "#5bfcf4",
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 15],
            symbolOffset: [0, 16],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#5bfcf4",
                borderType: "solid",
                borderWidth: 20,
              },
            },
            data: yData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [70, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#16d4c4",
                borderType: "solid",
                borderWidth: 10,
              },
            },
            data: yData,
          },
          {
            type: "bar",
            //silent: true,
            barWidth: "40",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "rgba(91,252,244,0.25)",
                  },
                  {
                    offset: 1,
                    color: "#5bfcf4",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.barChart {
  width: 100%;
  height: calc(100% - 0.0625rem);
  box-sizing: border-box;
}
</style>
